<template>
  <span class="demonstration">{{ widget.options.datepickerText }}</span>
  <el-date-picker
    v-model="dateValue"
    :readonly="widget.options.readonly"
    :disabled="widget.options.disabled"
    :size="widget.options.size"
    :editable="widget.options.editable"
    :clearable="widget.options.clearable"
    :placeholder="widget.options.placeholder"
    :start-placeholder="widget.options.startPlaceholder"
    :end-placeholder="widget.options.startPlaceholder"
    :type="widget.options.type"
    :format="widget.options.format"
    :value-format="widget.options.valueFormat"
    :range-separator="widget.options.rangeSeparator"
    :validate-event="widget.options.validateEvent"
    @focus.stop="selectField"
  >
    <!-- <slot></slot> -->
  </el-date-picker>
</template>

<script setup>
import { ref, watch } from "vue";
import { assignmentWidget } from "@/views/pageDesign/components/globalVariable";

defineOptions({
  name: "datepickerWidget",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
});
let dateValue = ref(null);
//监听日期改变，传值给属性里的modelValue
watch(
  () => dateValue.value,
  (newValue, oldValue) => {
    $props.widget.options.modelValue = newValue;
  }
);
//监听属性里的modelValue改变，传值给dateValue
watch(
  () => $props.widget.options.modelValue,
  (newValue, oldValue) => {
    dateValue.value = newValue
  }
);
let selectField = () => {
  assignmentWidget($props.widget);
};
</script>

<style lang="scss" scoped>
.demonstration {
  margin-right: 10px;
}
</style>
